<template>
  <div class="kui-content-wrap">
    <div class="kui-wrap-desk kui-flex kui-flex-between kui-flex-middle">
      <Breadcrumb class="kui-desk-nav">
        <BreadcrumbItem to="/">我的工作台</BreadcrumbItem>
        <BreadcrumbItem to="/booth">展位管理</BreadcrumbItem>
        <BreadcrumbItem>新增展位</BreadcrumbItem>
      </Breadcrumb>
    </div>
    <div class="kui-wrap-body">
      <div class="kui-body-section">
        <div class="kui-section-item">
          <div class="kui-item-bd">
            <Form class="kui-form-panel" ref="formData" :rules="ruleValidate" :model="temporaryData" :label-width="90" label-position="left">
              <FormItem label="展位编号：" prop="no">
                <Input v-model="temporaryData.no"  placeholder="请输入"/>
              </FormItem>
              <FormItem label="所属分类：" prop="cate">
                <Select v-model="temporaryData.cate" style="width:294px" placeholder="请选择类型">
                    <Option v-for="(item, index) of typeOption" :key="index" :value="item.value">{{item.label}}</Option>
                </Select>
              </FormItem>
              <FormItem label="展位区域：" prop="area">
                <Select v-model="temporaryData.area" style="width:294px" placeholder="请选择区域">
                      <Option v-for="(item, index) of regionOption" :key="index" :value="item.value">{{item.label}}</Option>
                </Select>
              </FormItem>
              <FormItem label="展位规格："  prop="spec">
                <Input v-model="temporaryData.spec" placeholder="请输入,例如2M*2M"/>
              </FormItem>
              <FormItem label="展位地址：" prop="address">
                <Input v-model="temporaryData.address" placeholder="请输入"/>
              </FormItem>
              <FormItem label="备注信息：">
                <Input v-model="temporaryData.info" type="textarea" placeholder="请输入"/>
              </FormItem>
              <FormItem>
                <Button type="primary" @click="clickPostData">保存新增</Button>
              </FormItem>
            </Form>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      temporaryData: {
        address: '',
        gps: ''
      },
      regionOption:[], //区域搜索选项
      typeOption: [], //类型搜索选项
      ruleValidate: {
                    no: [
                        { required: true, message: '请输入展位编号', trigger: 'blur' }
                    ],
                    cate: [
                        { required: true, message: '请选择所属分类', trigger: 'change' }
                    ],
                    area: [
                        { required: true, message: '请选择展位区域', trigger: 'change' }
                    ],
                    spec: [
                        { required: true, message: '请输入展位规格', trigger: 'blur' }
                    ],
                    address: [
                        { required: true, message: '请输入展位地址', trigger: 'blur' }
                    ]
                }
    }
  },
  methods: {
    //链接数据
    async postData() {
      const app = this
      let { data } = await app.$axios.post('/master/v1/board', app.temporaryData)
      if (data.code === 100) {
        app.temporaryData = {
          address: '',
          gps: ''
        },
        app.$Message.success('保存成功')
        app.$router.push('/booth')
      } else {
        app.$Message.error(data.msg)
      }
    },
    //区域搜索选项
    async regionOptionData() {
      const app = this
      let { data } = await app.$axios.get('/public/v1/options', {
        params: {type: 'area'}
      })
      if(data.code === 100){
        app.regionOption = data.result
      }else{
        app.$Message.error(data.msg)
      }
    },
    //类型搜索选项
    async typeOptionData() {
      const app = this
      let { data } = await app.$axios.get('/public/v1/options', {
        params: {type: 'cate'}
      })
      if(data.code === 100){
        app.typeOption = data.result
      }else{
        app.$Message.error(data.msg)
      }
    },
    // 获取用户经纬度信息
    async getGps () {
      const app = this
      let { data } = await app.$axios.get('v3/geocode/geo', {
        params: {
          address: app.temporaryData.address,
          city: '南充',
          key: '925a3b2bc1eb84a46c70b3c097cbc458'
        }
      })
      if (data.count === '1') {
          app.temporaryData.gps = data.geocodes[0].location
          app.postData()
        }else {
          app.$Message.error('地址输入不合法！')
        }
    },
    clickPostData() {
      const app = this
        if(app.temporaryData.address !== '') {
          app.getGps()
        }else {
          app.$Message.error('展位地址不能为空！')
        }

    },
    cancel() {
      this.temporaryData = {}
    }
  },
    created() {
    this.regionOptionData()
    this.typeOptionData()
  }
}
</script>

<style lang="less" scoped></style>
